<template>
	<view class="zh-u-loading" v-if="props.show">
		<view class="loading"></view>
	</view>
</template>

<script setup lang="ts">
	const props = withDefaults(defineProps<{
		show?: boolean
	}>(), {
		
	}) 
	
</script>

<style lang="scss" scoped>
	.zh-u-loading {
	    display: flex;
	    justify-content: center;
	    align-items: center;
		.loading {
		  border: 6rpx solid rgba(0, 0, 0, 0.01);
		  border-radius: 50%;
		  border-top: 6rpx solid #1769ff;
		  border-right: 6rpx solid #1769ff;
		  border-bottom: 6rpx solid #1769ff;
		  width: 35rpx;
		  height: 35rpx;
		  transform: translate(-17rpx, -17rpx);
		  -webkit-animation: spin 1.4s linear infinite;
		  animation: spin 1.4s linear infinite;
		}
		@-webkit-keyframes spin {
		  0% {
		    -webkit-transform: rotate(0deg);
		  }
		
		  100% {
		    -webkit-transform: rotate(360deg);
		  }
		}
		
		@keyframes spin {
		  0% {
		    transform: rotate(0deg);
		  }
		
		  100% {
		    transform: rotate(360deg);
		  }
		}
		
	}
</style>